<template>
    <div class="wrapper">
        <Row>
            <Col>
                <Tag color="black"  size="small">我的录音机</Tag>
            </Col>
        </Row>
        
        <center style="margin: 100px">
                <!-- TODO 等会回来调样式 -->
            <!-- 第一序列控制按钮 -->
            <Row>
                <Col>
                    <!-- button_a_disabled -->
                    <Button type="success" :disabled="button_distable_ctl.button_a_disabled" @click="startRecorder"> 
                        <Icon size="10px" color="white" type="record" /> 开始录音
                    </Button> 

                    <!-- button_b_disabled -->
                    <Button type="warning" :disabled="button_distable_ctl.button_b_disabled" @click="ctlRecorder">
                        <span class="icon is-small">
                                <i v-if="isRecorder" class="fa fa-pause" />
                                <i v-if="!isRecorder" class="fa fa-play" />
                        </span> {{ isRecorder?'暂停':'开始' }}
                    </Button>

                    <!-- button_c_disabled -->
                    <Button type="error" :disabled="button_distable_ctl.button_c_disabled" @click="preListening">
                        <span class="icon is-small">
                                <i class="fa fa-bullhorn" />
                        </span> 试听一下
                    </Button>
                    
                    <Button type="error" @click="resetRecorder">
                        <span class="icon is-small">
                                <i class="fa fa-bullhorn" />
                        </span> 重置
                    </Button>
                </Col>
            </Row>


                <!-- 第二序列控制按钮 -->
            <Row>
                <Col>  
                        <!-- button_d_disabled -->
                        <Button type="info" :disabled="button_distable_ctl.button_d_disabled" @click="saveToWav">
                        <span class="icon is-small">
                                <i class="fa fa-save" />
                        </span> 保存为音频
                    </Button>
                </Col>
            </Row>
        </center>
    </div>
</template>

<script>
import Recorderx, { ENCODE_TYPE } from 'recorderx';
export default {
    data() {
        return {
            rc : '',
            isRecorder: true,
            // 按钮禁用控制 组
            button_distable_ctl: {
                button_a_disabled: false, // 开始录音
                button_b_disabled: true,  // 暂停/开始
                button_c_disabled: true,  // 试听一下
                button_d_disabled: true,  // 保存为音频
            }
        }
    },

    methods: {

        // 修改按钮组  a , b ,c ,d 四个按钮的状态 true/false
        modifyButtonDisabled(a, b, c, d) {
            this.button_distable_ctl.button_a_disabled = a
            this.button_distable_ctl.button_b_disabled = b
            this.button_distable_ctl.button_c_disabled = c
            this.button_distable_ctl.button_d_disabled = d
        },


        resetRecorder() {
             // 初始化
            if(this.rc !== ''){
                this.rc.clear()
                this.rc = ''
                this.isRecorder = true
            }
            this.modifyButtonDisabled(false, true, true, true);
        },

        // 开始录音  
        startRecorder() {
            console.log("message", "开始录音")
            let that = this
            // 初始化
            if(this.rc !== ''){
                this.rc.clear()
                this.rc = ''
                this.isRecorder = true
            }

            this.$nextTick(() =>{
                that.rc = new Recorderx(true)
                console.log(that.rc)
                that.rc.start().then(() => {
                    console.log("start recording");
                    this.$Notice.success({
                        title: '开始录音',
                        desc: '若存在正在录制的音频，那么它将会被覆盖',
                    });
                    
                    // 修改按钮组状态
                    that.modifyButtonDisabled(true, false, true, true);
                }).catch(error => {
                    console.log("Recording failed.", error);
                });
            })
        },

        // 暂停/继续
        ctlRecorder() {
            // 是0 改为1  是1 改为0  傻了
            if(this.isRecorder) {
                console.log("点击后执行暂停录音的逻辑")
                this.$Notice.warning({title: '已经暂停录音'});
                this.isRecorder = false
                // 暂停录音
                this.rc.pause();
                // 按钮组状态修改
                this.modifyButtonDisabled(false, false, false, false);

            }else{
                console.log("点击后执行继续录音逻辑")
                this.$Notice.success({title: '继续录音'});
                this.isRecorder = true
                // 继续录音
                this.rc.start();
                // 按钮组状态修改
                this.modifyButtonDisabled(true, false, true, true);
            }
        },

        // 试听一下
        preListening() {
            console.log("试听一下")
            let data = this.rc.getRecord({
                encodeTo: ENCODE_TYPE.WAV,
            });
            let url = window.URL.createObjectURL(data)
            let audio = new Audio(url)
            audio.play()
            console.log(audio)
            this.$Notice.open({
                    title: '正在试听',
                    desc: '试听音频 ----[试听内容为从点击开始录音按钮至今的所有音频]',
                    duration: audio.duration
                });
        },

        // 保存为音频文件
        saveToWav() {
            console.log("保存为音频")
            let data = this.rc.getRecord({
                encodeTo: ENCODE_TYPE.WAV,
            });
            const a = document.createElement("a")
            a.href = URL.createObjectURL(data)
            a.download = this.uuid() + ".wav" // 这里填保存成的文件名
            a.click()
            URL.revokeObjectURL(a.href)
            a.remove();

            // 暂停录音
            this.rc.clear();
            // 按钮组状态修改
            this.modifyButtonDisabled(false, true, true, true);
            this.isRecorder = true

        },

        uuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";

            var uuid = s.join("");
            return uuid;
        }
    },

}
</script>

<style scoped>

button{
    margin: 10px;
}

.wrapper{
}
</style>